import React, { Component } from 'react';
import './Search.scss'
import { DeleteOutline } from 'antd-mobile-icons'
import service from '../../api'
import { NavBar, SearchBar } from 'antd-mobile'

class Search extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            hotword: [],
            history: []
        }
    }
    componentDidMount() {
        var history = this.getData('history')
        this.setState({
            history
        })
        service.pro.getHotword().then(res => {
            // console.log(res);
            this.setState({
                hotword: res.data.data
            })
        })
    }
    back() {
        this.props.history.push('/index/home')
    }
    onSearch(keyword: string) {
        this.props.history.replace({
            pathname: '/searchlist', state: {
                keyword
            }
        })
        var history = this.getData('history')
        if (history.indexOf(keyword) === -1 && keyword.trim()) {
            history.unshift(keyword)
        }
        else {
            var index = history.findIndex((item: any) => item === keyword)
            history.splice(index, 1)
            history.unshift(keyword)
        }
        this.setData('history', history)

    }
    setData(name: any, value: any) {
        localStorage.setItem(name, JSON.stringify(value))
    }
    getData(name: any) {
        var data = localStorage.getItem(name)
        if (!data) {
            return []
        }
        else {
            return JSON.parse(data)
        }
    }
    delHistory() {
        this.setData('history', [])
        var history = this.getData('history')
        this.setState({
            history
        })
    }
    render() {
        // console.log(this.state.history)
        return (
            <div className='search'>
                <header>
                    <NavBar onBack={() => { this.back() }}>
                        <SearchBar placeholder='请输入店铺内商品' onSearch={(value) => { this.onSearch(value) }} />
                    </NavBar>
                </header>
                <main>
                    <div className="history">
                        <h4><span>最近搜索</span>
                            <DeleteOutline onClick={this.delHistory.bind(this)} />
                        </h4>
                        <div>
                            {
                                this.state.history.map((item: any, index: number) => {
                                    return (
                                        <span onClick={() => { this.onSearch(item) }} key={index}>{item}</span>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="hot">
                        <h4>
                            <span>热门搜索</span>
                        </h4>
                        <div>
                            {
                                this.state.hotword.map((item: any, index: number) => {
                                    return (
                                        <span onClick={() => { this.onSearch(item.keyword) }} key={index}>{item.keyword}</span>
                                    )
                                })
                            }
                        </div>

                    </div>
                </main>
            </div>
        );
    }
}

export default Search;